<template>
  <div class="q-pa-md">
    <q-card class="full-height column">
      <!-- 组件列表-->
      <q-tab-panels v-model="currentTab" animated class="col">
        <q-tab-panel  v-for="item in schemeConfig" :key="item.name"
                     :name="item.name" style="padding: 0 !important;">
          <component :is="item.component"/>
        </q-tab-panel>
      </q-tab-panels>

      <q-separator/>

      <!--底部tab导航-->
      <q-tabs
        v-model="currentTab"
        dense
        class="bg-grey-3"
        align="justify"
        active-color="primary"
        indicator-color="primary"
        narrow-indicator
      >
        <q-tab v-for="item in schemeConfig" :key="item.name" :name="item.name"
               :icon="item.icon" :label="item.label"/>
      </q-tabs>
    </q-card>
  </div>
</template>

<script setup>
import { schemeConfig } from './config'
import { ref } from 'vue'
// 当前tab
const currentTab = ref(schemeConfig[0].name)
</script>
